$(function () {
    $(".q1").attr("flag", 1)
    $(".q1").on({
        focus: function () {
            $(this).prev().stop().animate({
                top: "30%",
                fontSize: 12
            }, 150)
        },
        focusout: function () {
            $(this).prev().stop().animate({
                top: "50%",
                fontSize: 16
            }, 150)
            if (!$(this).val()) {
                $(this).prev().css({
                    color: "#ff5c00"
                })
                $(this).parent().css({
                    backgroundColor: "rgb(252, 242, 243)"
                })
                if ($(this).parent().index() === 0) {
                    if ($(this).attr("flag") == 1) {
                        $(this).attr("flag", 0)
                        $(this).parent().append("<li style='color:#f04645;font-size:12px;'>请输入" + $(this).prev().text() + "</li>")
                    }
                } else {
                    if ($(this).attr("flag") == 1) {
                        $(this).attr("flag", 0)
                        $(this).parent().append("<li style='color:#f04645;font-size:12px;'>请输入" + $(this).prev().text() + "</li>")
                    }
                }
            } else {
                $(this).prev().stop().animate({
                    top: "30%",
                    fontSize: 12
                }, 150)
            }
        },
        keyup: function () {
            if ($(this).val() !== "") {
                if ($(this).attr("flag") == 0) {
                    $(this).next().remove()
                    $(this).attr("flag", 1)
                }
                $(this).parent().css({
                    backgroundColor: "#f9f9f9"
                })
                $(this).prev().css({
                    color: "rgba(0,0,0,.4)"
                })
            } else {
                $(this).parent().css({
                    backgroundColor: "rgb(252, 242, 243)",
                })
                $(this).prev().css({
                    color: "#ff5c00"
                })
            }
        }
    })
    $(".denl").click(function () {
        if (!$(".tongyi1").prop("checked")) {
            $(".tongyi").stop().fadeIn()
            var timer = setInterval(function () {
                $(".tongyi").stop().fadeOut()
                clearInterval(timer)
            }, 2000)
        } else {
            var arr = getData()
            for (var i = 0; i < arr.length; i++) {
                if ($(".q1").eq(0).val() == arr[i].zhanghao && $(".q1").eq(1).val() == arr[i].mima) {
                    alert("登录成功")
                    return
                }
            }
            alert("账号或密码输入错误")
        }
    })
    var flag1 = 1
    $(".q2").eq(1).prev().click(function () {
        $(this).toggleClass("icon-yanjing")
        if (flag1 == 1) {
            flag1 = 0
            $(".q1").eq(1).prop("type", "text")
        } else {
            flag1 = 1
            $(".q1").eq(1).prop("type", "password")
        }

    })
    function getData() {
        if (localStorage.getItem("yonghu")) {
            return JSON.parse(localStorage.getItem("yonghu"))
        } else {
            return []
        }
    }
})
